<!--
 * @Description: 产品详情新建，修改弹窗
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-10 11:31:25
 * @LastEditors: 黄勇
 -->
<template>
    <AppDialog
        :isShowDialog="true"
        width="900px"
        title="产品生产"
        @confirm="checkChildProduct"
        @close="$emit('close')"
        class="clean-el-dialog__body"
    >
        <div class="product-detail">
            <p class="product-detail__header">产品信息</p>
            <div class="product-detail__content">
                <div class="product-detail__left">
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品编码:</label>
                        <el-input
                            class="product-detail__input"
                            v-model="product.code"
                            disabled
                            placeholder="请输入产品编码"
                        ></el-input>
                    </div>
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品名称:</label>
                        <el-input
                            class="product-detail__input"
                            v-model="product.name"
                            placeholder="请输入产品名称"
                        ></el-input>
                    </div>

                </div>
                <div class="product-detail__right">
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品类型:</label>
                        <el-select
                            class="product-detail__input"
                            v-model="product.type"
                            placeholder="请选择产品类型"
                        >
                            <el-option
                                v-for="item in productTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <p class="product-detail__header">云协同信息</p>
            <div class="product-detail__content">
                <div class="product-detail__left">
                    <div class="product-detail__item">
                        <label class="product-detail__label">产品线:</label>
                        <el-select
                            class="product-detail__input"
                            v-model="parameter.productLineId"
                            placeholder="请选择产品线"
                        >
                            <el-option
                                v-for="item in productLineOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>

                    <div class="product-detail__item">
                        <label class="product-detail__label">版本号:</label>

                        <el-input
                            class="product-detail__input"
                            v-model="parameter.version"
                            placeholder="请输入版本号"
                        ></el-input>
                    </div>
                </div>
                <div class="product-detail__right">
                    <div class="product-detail__item">
                        <label class="product-detail__label">版本类型:</label>
                        <el-input
                            class="product-detail__input"
                            v-model="parameter.versionType"
                            placeholder="请输入版本类型"
                        ></el-input>
                    </div>
                </div>

            </div>
            <p class="product-detail__header">产品包服务信息</p>
            <div>
                <div style="margin-bottom: 20px;">
                    <el-button
                        type="primary"
                        @click="showAddDialog(true)"
                    >
                        <app-icon iconName="vcloud-btn-add"></app-icon>
                        添加服务
                    </el-button>

                    <el-button
                        type="plain"
                        @click="deletePluginToProduct"
                    >
                        <app-icon iconName="vcloud-shanchu"></app-icon>
                        删除
                    </el-button>
                </div>

                <el-table
                    ref="singleCheck"
                    :data="productPluginList"
                    tooltip-effect="dark"
                    style="width: 100%;"
                    highlight-current-row
                    header-row-class-name="header-row"
                    @select="(selection, row) => handleRowClick(row)"
                    @row-click="handleRowClick"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column
                        prop="code"
                        label="服务编码"
                        width="160"
                    ></el-table-column>
                    <el-table-column
                        prop="typeName"
                        label="服务类型"
                        width="80"
                    ></el-table-column>

                    <el-table-column
                        prop="name"
                        label="服务名称"
                        :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                        label="服务方式"
                        width="90"
                    >
                        <template slot-scope="scope">
                            {{
                                staticType.getStaticTypeLabel('serviceModeType', scope.row.serviceModeType)
                            }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="parameter.serviceContent"
                        label="服务内容"
                        width="100"
                    >
                        <template slot-scope="scope">
                            <!-- {{
                                getServiceContent(scope.row)
                            }} -->
                            <div v-if=" scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'count') || scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'counttime')">
                                数量: {{scope.row.parameter.serviceMode.count}}个
                            </div>
                            <div v-if=" scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'time') || scope.row.serviceModeType === staticType.getStaticTypeValue('serviceModeType', 'counttime')">
                                时长: {{scope.row.parameter.serviceMode.time}}个月
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="billingPolicy.policyName"
                        label="计费方式"
                        width="80"
                    >
                    </el-table-column>
                    <el-table-column
                        label="使用类型"
                        width="80"
                    >
                        <template slot-scope="scope">
                            {{
                                staticType.getStaticTypeLabel(
                                    "saleType",
                                    scope.row.saleType
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="120"
                    >
                        <template slot-scope="scope">
                            <span
                                @click.stop="showModifyDialog(true, scope.row)"
                                class="table-detail cursor-pointer"
                            >设置服务内容</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <AppDialog
            :isShowDialog="isShowAddDialog"
            :append-to-body="true"
            width="740px"
            title="选择插件"
            @confirm="addPluginToProduct"
            @close="showAddDialog(false)"
        >
            <div class="product-plugin">
                <div class="product-plugin__left">
                    <div class="product-plugin__header">
                        <el-select
                            v-model="selectType"
                            placeholder="请选择服务类型"
                        >
                            <el-option
                                v-for="item in cag1Options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >

                            </el-option>
                        </el-select>

                    </div>
                    <div class="product-plugin__content">
                        <div
                            :class="[
                                'product-plugin__item cursor-pointer text-ellipsis',
                                { checked: plugin.checked }
                            ]"
                            v-for="plugin in pluginAllList"
                            :key="plugin.id"
                            @click="plugin.checked = !plugin.checked"
                            @dblclick="dbclickCheckPlugin(plugin)"
                            :title="`${plugin.service_name}[${plugin.id}]`"
                        >
                            {{ plugin.service_name }}[{{plugin.id}}]
                        </div>
                    </div>
                </div>
                <div class="product-plugin__center">
                    <div
                        class="product-plugin__btn cursor-pointer"
                        @click="addPluginList"
                    >
                        <app-icon iconName="vcloud-youjiantou"></app-icon>
                    </div>
                    <div
                        class="product-plugin__btn cursor-pointer"
                        @click="deletePluginList"
                    >
                        <app-icon iconName="vcloud-zuojiantou"></app-icon>
                    </div>
                </div>
                <div class="product-plugin__left">
                    <div class="product-plugin__header">已选</div>
                    <div class="product-plugin__content">
                        <div
                            :class="[
                                'product-plugin__item cursor-pointer text-ellipsis',
                                { checked: plugin.checked }
                            ]"
                            v-for="plugin in pluginList"
                            :key="plugin.id"
                            @click="plugin.checked = !plugin.checked"
                            @dblclick="dbclickDeletePlugin(plugin)"
                            :title="`${plugin.service_name}[${plugin.id}]`"
                        >
                            {{ plugin.service_name }}[{{plugin.id}}]
                        </div>
                    </div>
                </div>
            </div>
        </AppDialog>
        <AppDialog
            :isShowDialog="isShowModifyDialog"
            :append-to-body="true"
            width="500px"
            title="修改"
            @confirm="modifyPluginConfirm"
            @close="showModifyDialog(false)"
        >
            <div class="product-modify">
                <div class="product-modify__item">
                    <label class="product-modify__label">服务类型:</label>
                    <el-select
                        v-model="modifyPlugin.type"
                        placeholder="请选择服务类型"
                        disabled
                        class="product-detail__input"
                    >
                        <el-option
                            v-for="item in cag1Options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>

                <div class="product-modify__item">
                    <label class="product-modify__label">服务名称:</label>
                    <el-input
                        v-model="modifyPlugin.name"
                        disabled
                        placeholder="请输入服务名称"
                        class="product-detail__input"
                    ></el-input>
                </div>
                <div class="product-modify__item">
                    <label class="product-modify__label">服务方式:</label>
                    <div>
                        <el-radio
                            v-model="modifyPlugin.serviceMode"
                            :label="staticType.getStaticTypeValue('serviceModeType', 'count')"
                        >数量</el-radio>
                        <el-radio
                            v-model="modifyPlugin.serviceMode"
                            :label="staticType.getStaticTypeValue('serviceModeType', 'time')"
                        >时长</el-radio>
                        <el-radio
                            v-model="modifyPlugin.serviceMode"
                            :label="staticType.getStaticTypeValue('serviceModeType', 'counttime')"
                        >数量 + 时长</el-radio>
                    </div>
                </div>
                <div class="product-modify__item">
                    <label class="product-modify__label">服务内容:</label>
                    <div class="product-modify__service">
                        <p>
                            数量
                            <el-input
                                v-model="modifyPlugin.count"
                                type="number"
                                :disabled="modifyPlugin.serviceMode != staticType.getStaticTypeValue('serviceModeType', 'count') && modifyPlugin.serviceMode != staticType.getStaticTypeValue('serviceModeType', 'counttime')"
                                style="width: 120px;margin: 0 10px;"
                            ></el-input>
                            个
                        </p>
                        <p>
                            时长
                            <el-input
                                v-model="modifyPlugin.time"
                                type="number"
                                @input="handleTimeChange"
                                :disabled="modifyPlugin.serviceMode != staticType.getStaticTypeValue('serviceModeType', 'time') && modifyPlugin.serviceMode != staticType.getStaticTypeValue('serviceModeType', 'counttime')"
                                style="width: 120px;margin: 0 10px;"
                            ></el-input>
                            月
                        </p>

                    </div>
                </div>

                <div
                    v-if="modifyPlugin.type === '2'"
                    class="product-modify__item"
                >
                    <label class="product-modify__label">商品ID:</label>
                    <el-input
                        v-model="modifyPlugin.mallId"
                        placeholder="请输入商品ID"
                        class="product-detail__input"
                    ></el-input>
                </div>
                <div class="product-modify__item">
                    <label class="product-modify__label">计费方式:</label>
                    <el-input
                        v-model="modifyPlugin.policyName"
                        placeholder="请输入计费方式"
                        class="product-detail__input"
                    ></el-input>
                </div>
                <div class="product-modify__item">
                    <label class="product-modify__label">使用类型:</label>
                    <el-select
                        v-model="modifyPlugin.saleType"
                        placeholder="请选择使用类型"
                        class="product-detail__input"
                    >
                        <el-option
                            v-for="item in saleTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
        </AppDialog>
    </AppDialog>
</template>

<script>
import AppDialog from "@/components/AppCommon/AppDialog";
import TransferDialog from "@/components/transferDialog";
import { deepCopy } from "@/utils/tool";
export default {
    name: "product-modify",
    components: {
        AppDialog,
        TransferDialog
    },
    props: {},
    computed: {},
    data: () => ({
        saleTypeOptions: [],
        productTypeOptions: [],
        productLineOptions: [],

        cag1Options: [],

        product: {
            code: "",
            name: "",
            type: "",
            mainContent: "",
            id: ""
        },
        parameter: {
            productLine: "",
            productLineId: "",
            productType: "",
            versionType: "",
            version: "",
            registerNumber: "",
            concurrencyNumber: "",
            spaceCapacity: ""
        },
        isShowAddDialog: false,
        isShowModifyDialog: false,
        // 产品插件列表
        productPluginList: [],
        productPlugin: [],
        checkedPlugin: {},

        // ************************************************** 添加插件变量
        // 能拿到的所有的插件列表
        pluginAllList: [],
        // 选中的插件列表
        pluginList: [],

        // 下拉选择服务分类
        selectType: "", //选中的服务服务分类值

        defaultProps: {
            //指定节点的对应
            label: "name",
            value: "id",
            children: "children"
        },

        // ************************************************** 修改插件变量
        modifyPlugin: {
            id: "",
            dependId: "",
            type: "",
            name: "",
            serviceMode: "",
            time: "",
            count: "",
            saleType: "",
            policyName: "",
            mallId: ""
        }
    }),
    created() {
        this.createProduct();
        this.getCategoryType();
    },
    mounted() {},
    watch: {
        selectType(newVal, oldVal) {
            if (newVal || newVal === "0") {
                this.getProductBasicInfosByType(newVal);
            }
        },
        "modifyPlugin.serviceMode"() {
            this.modifyPlugin.time = "";
            this.modifyPlugin.count = "";
        }
    },
    methods: {
        // 创建空白产品，主要是获取产品code, 初始化下拉项与值
        createProduct() {
            this.api
                .createProduct()
                .then(res => {
                    let data = res.data;
                    this.product.code = data.productCode;
                    this.product.id = data.productId;
                    // 处理下拉options字段
                    let typeArr = [
                        {
                            name: "productLine",
                            data: data.productLines
                        },
                        {
                            name: "sale",
                            data: data.saleTypes
                        },
                        {
                            name: "product",
                            data:
                                data.types &&
                                data.types.filter(item => item.value === "0")
                        }
                    ];
                    this.staticType.initNewDataArr(typeArr);
                    //
                    this.saleTypeOptions = this.staticType.getStaticType(
                        "saleType"
                    );

                    this.productTypeOptions = this.staticType.getStaticType(
                        "productType"
                    );

                    this.productLineOptions = this.staticType.getStaticType(
                        "productLineType"
                    );

                    // 初始化默认下拉项值
                    let defalutLine =
                        (data.productLines &&
                            data.productLines[0] &&
                            data.productLines[0].value) ||
                        "";

                    let defalutSale =
                        (data.saleTypes &&
                            data.saleTypes[0] &&
                            data.saleTypes[0].value) ||
                        "";
                    let defalutType =
                        (data.types && data.types[0] && data.types[0].value) ||
                        "";

                    this.parameter.productLineId = defalutLine;
                    this.product.type = defalutType;
                })
                .catch(err => {});
        },

        // 获取服务分类枚举
        getCategoryType() {
            this.api
                .getCategoryType({}, { method: "get", customRequest: true })
                .then(res => {
                    let data = res.data || [];

                    let defaultCag1 = data[0];

                    let handleData = data.map(item => {
                        return {
                            name: item.description,
                            value: item.key
                        };
                    });
                    this.staticType.initNewData("category1", handleData);
                    this.cag1Options = this.staticType.getStaticType(
                        "category1Type"
                    );
                    this.selectType = defaultCag1.key;
                })
                .catch(err => {});
        },
        // 根据分类Id 获取可选服务
        getProductBasicInfosByType(type) {
            this.api
                .getProductBasicInfosByType(
                    {
                        params: {
                            type: type
                        }
                    },
                    { method: "get", customRequest: true }
                )
                .then(res => {
                    let data = res.data || [];

                    let availablePlugin = [];

                    data.forEach(item => {
                        item.checked = false;

                        if (
                            !this.pluginList.some(p => p.id === item.id) &&
                            item.status ==
                                this.staticType.getStaticTypeValue(
                                    "statusType",
                                    "enable"
                                )
                        ) {
                            availablePlugin.push(item);
                        }
                    });
                    this.pluginAllList = availablePlugin;
                })
                .catch(err => {});
        },
        // 获取主产品附带插件列表
        getProductPluginList() {
            this.api
                .getProductPluginList({
                    mainProductId: this.product.id
                })
                .then(res => {
                    let data = res.data.records || [];
                    this.productPluginList = data;
                })
                .catch(err => {});
        },
        // 拼接服务内容字段
        getServiceContent(row) {
            let result = "";

            if (
                row &&
                row.parameter &&
                row.parameter.serviceMode &&
                row.parameter.serviceMode.type
            ) {
                let type = row.parameter.serviceMode.type;
                let serviceMode = row.parameter.serviceMode;
                let staticType = this.staticType;

                switch (type) {
                    case staticType.getStaticTypeValue(
                        "serviceModeType",
                        "count"
                    ):
                        result = `数量: ${serviceMode.count}个`;
                        break;
                    case staticType.getStaticTypeValue(
                        "serviceModeType",
                        "time"
                    ):
                        result = `时长: ${serviceMode.time}个月`;
                        break;
                    case staticType.getStaticTypeValue(
                        "serviceModeType",
                        "counttime"
                    ):
                        result = `数量: ${serviceMode.count}个 时长: ${serviceMode.time}个月`;
                        break;
                    default:
                        break;
                }
            }
            return result;
        },
        showAddDialog(value) {
            this.isShowAddDialog = value;
        },
        showModifyDialog(value, row) {
            let checkedPlugin = row || this.checkedPlugin;
            if (value) {
                if (!checkedPlugin.id) {
                    this.$message({
                        showClose: true,
                        message: "请先选中要修改的服务",
                        type: "warning"
                    });
                    return;
                } else {
                    this.modifyPlugin = {
                        id: checkedPlugin.id,
                        dependId: checkedPlugin.parameter.dependId,
                        name: checkedPlugin.name,
                        type: checkedPlugin.type,
                        saleType: checkedPlugin.saleType,
                        serviceMode:
                            checkedPlugin.parameter.serviceMode &&
                            checkedPlugin.parameter.serviceMode.type,
                        time:
                            checkedPlugin.parameter.serviceMode &&
                            checkedPlugin.parameter.serviceMode.time,
                        count:
                            checkedPlugin.parameter.serviceMode &&
                            checkedPlugin.parameter.serviceMode.count,
                        policyName: checkedPlugin.billingPolicy.policyName,
                        mallId: checkedPlugin.mallId
                    };
                }
            }
            this.isShowModifyDialog = value;
        },
        // 可取消选中的单选
        handleRowClick(row) {
            this.$refs.singleCheck.clearSelection();
            if (this.checkedPlugin && this.checkedPlugin.id === row.id) {
                this.checkedPlugin = {};
                this.$refs.singleCheck.setCurrentRow();
            } else {
                this.checkedPlugin = row;
                this.$refs.singleCheck.setCurrentRow(row);
                this.$refs.singleCheck.toggleRowSelection(row);
            }
        },

        addPluginList() {
            let checkedPlugin = [];
            let notCheckPlugin = [];
            this.pluginAllList.forEach(item => {
                if (item.checked) {
                    // 复制， 对象只有一层
                    checkedPlugin.push(
                        Object.assign({}, item, { checked: false })
                    );
                } else {
                    notCheckPlugin.push(Object.assign({}, item));
                }
            });
            this.pluginAllList = notCheckPlugin;
            this.pluginList = this.pluginList.concat(checkedPlugin);
        },

        // 双击服务列表直接添加
        dbclickCheckPlugin(plugin) {
            this.pluginAllList = this.pluginAllList.filter(
                item => item.id !== plugin.id
            );
            let deepCopyCheckPlugin = deepCopy(plugin);
            deepCopyCheckPlugin.checked = false;
            this.pluginList.push(deepCopyCheckPlugin);
        },

        deletePluginList() {
            this.pluginList = this.pluginList.filter(item => !item.checked);
            this.selectType && this.getProductBasicInfosByType(this.selectType);
        },
        dbclickDeletePlugin(plugin) {
            this.pluginList = this.pluginList.filter(
                item => item.id !== plugin.id
            );
            this.selectType && this.getProductBasicInfosByType(this.selectType);
        },
        // 将选中的插件添加至产品
        addPluginToProduct() {
            let productInfo = this.pluginList.map(item => {
                return {
                    dependId: item.id
                };
            });
            this.api
                .addPluginToProduct({
                    mainProductId: this.product.id,
                    productInfos: productInfo
                })
                .then(res => {
                    this.showAddDialog(false);
                    this.getProductPluginList();
                    this.pluginList = [];
                })
                .catch(err => {});
        },

        // 删除产品插件列表中的插件
        deletePluginToProduct() {
            if (!this.checkedPlugin.id) {
                this.$message({
                    showClose: true,
                    message: "请先选中要删除的服务",
                    type: "warning"
                });
                return;
            }
            this.$confirm("确认要删除服务？", "", {}).then(() => {
                this.api
                    .deletePluginToProduct({
                        mainProductId: this.product.id,
                        productIds: [this.checkedPlugin.id]
                    })
                    .then(res => {
                        this.showAddDialog(false);
                        this.getProductPluginList();
                    })
                    .catch(err => {});
            });
        },
        // 修改产品插件列表中插件构造， 校验数据
        modifyPluginConfirm() {
            let { modifyPlugin, product } = this;

            // 校验字段

            //构造数据
            let postData = {
                mainProductId: product.id,
                productInfo: {
                    id: modifyPlugin.id,
                    dependId: modifyPlugin.dependId,
                    type: modifyPlugin.type,
                    saleType: modifyPlugin.saleType,
                    mallId: modifyPlugin.mallId,
                    billingPolicy: {
                        policyName: modifyPlugin.policyName
                    },
                    serviceMode: {
                        type: modifyPlugin.serviceMode,
                        time: modifyPlugin.time,
                        count: modifyPlugin.count
                    }
                }
            };
            if (!this.checkServiceData(postData.productInfo)) return;
            this.modifyPluginToProduct(postData);
        },
        // 限制服务时长最大值，最小值
        handleTimeChange() {
            let timeVal = this.modifyPlugin.time;
            if (parseInt(timeVal) > 1200) {
                this.$message({
                    showClose: true,
                    message: "最大只支持1200个月",
                    type: "warning"
                });
                timeVal = 1200;
            }
            if (parseInt(timeVal) < 1) {
                this.$message({
                    showClose: true,
                    message: "最小支持1个月",
                    type: "warning"
                });
                timeVal = 1;
            }
            this.modifyPlugin.time = timeVal;
        },
        // 检查服务数据是否完整
        checkServiceData(data) {
            let staticType = this.staticType;
            let serviceMode = data.serviceMode;
            let type = serviceMode.type;
            if (!type) {
                this.$message({
                    showClose: true,
                    message: "请先选择服务方式",
                    type: "error"
                });
                return false;
            }
            if (
                type ===
                    staticType.getStaticTypeValue("serviceModeType", "count") &&
                !serviceMode.count
            ) {
                this.$message({
                    showClose: true,
                    message: "请先设置服务内容",
                    type: "error"
                });
                return false;
            }
            if (
                type ===
                    staticType.getStaticTypeValue("serviceModeType", "time") &&
                !serviceMode.time
            ) {
                this.$message({
                    showClose: true,
                    message: "请先设置服务内容",
                    type: "error"
                });
                return false;
            }
            if (
                type ===
                    staticType.getStaticTypeValue(
                        "serviceModeType",
                        "counttime"
                    ) &&
                !serviceMode.count &&
                !serviceMode.time
            ) {
                this.$message({
                    showClose: true,
                    message: "请先设置服务内容",
                    type: "error"
                });
                return false;
            }

            // 业务包没有商品ID
            const PACKAGE_TYPE = "2"; //业务包 type
            if (data.type === PACKAGE_TYPE && !data.mallId) {
                this.$message({
                    showClose: true,
                    message: "请先设置商品ID",
                    type: "error"
                });
                return false;
            }
            // 没有计费方式
            if (!(data.billingPolicy && data.billingPolicy.policyName)) {
                this.$message({
                    showClose: true,
                    message: "请先设置计费方式",
                    type: "error"
                });
                return false;
            }
            return true;
        },
        // 修改产品插件列表中的插件
        modifyPluginToProduct(postData) {
            this.api
                .modifyPluginToProduct(postData)
                .then(res => {
                    this.showModifyDialog(false);
                    this.getProductPluginList();
                })
                .catch(err => {});
        },
        // 保存主产品先检查子产品服务内容
        checkChildProduct() {
            if (this.productPluginList && this.productPluginList.length > 0) {
                let val = this.productPluginList.some(item => {
                    return !this.checkServiceModeType(item);
                });
                if (val) {
                    this.$message({
                        showClose: true,
                        message: "请先设置服务内容",
                        type: "error"
                    });
                } else {
                    this.saveProduct();
                }
            } else {
                // 没有子产品直接保存
                this.saveProduct();
            }
        },
        // 检查服务列表数据是否完整
        checkServiceModeType(data) {
            let staticType = this.staticType;
            // 不存在服务方式
            if (!(data.parameter && data.parameter.serviceMode)) {
                return false;
            } else {
                // 存在服务方式，但没具体值
                let serviceMode = data.parameter.serviceMode;
                let type = serviceMode.type;

                if (
                    type ===
                        staticType.getStaticTypeValue(
                            "serviceModeType",
                            "count"
                        ) &&
                    !serviceMode.count
                ) {
                    return false;
                }
                if (
                    type ===
                        staticType.getStaticTypeValue(
                            "serviceModeType",
                            "time"
                        ) &&
                    !serviceMode.time
                ) {
                    return false;
                }
                if (
                    type ===
                        staticType.getStaticTypeValue(
                            "serviceModeType",
                            "counttime"
                        ) &&
                    !serviceMode.count &&
                    !serviceMode.time
                ) {
                    return false;
                }
            }

            // 业务包没有商品ID
            const PACKAGE_TYPE = "2"; //业务包 type
            if (data.type === PACKAGE_TYPE && !data.mallId) {
                return false;
            }
            // 没有计费方式
            if (!(data.billingPolicy && data.billingPolicy.policyName)) {
                return false;
            }
            return true;
        },
        // 保存主产品
        saveProduct() {
            let { product, parameter } = this;
            const MAIN_PRODUCT = "1"; // 主产品
            let postData = {
                productId: product.id,
                name: product.name,
                type: product.type,
                mainProduct: MAIN_PRODUCT,
                parameter: parameter
            };
            this.api
                .saveProduct(postData, {
                    customMessage: true
                })
                .then(res => {
                    if (res.data && res.data.productId) {
                        this.$message({
                            showClose: true,
                            message: "保存成功",
                            type: "success"
                        });
                        this.$emit("confirm");
                    } else {
                        this.$message({
                            showClose: true,
                            message: "保存失败",
                            type: "error"
                        });
                    }
                })
                .catch(err => {
                    this.$message({
                        showClose: true,
                        message: "保存失败",
                        type: "error"
                    });
                });
        }
    }
};
</script>

<style lang="scss" scoped src="../../../assets/styles/product/dialog.scss"></style>
<style lang="scss">
.product-plugin {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    .product-plugin__header {
        width: 100%;
        height: 40px;
        background: #f1f3f7;
        line-height: 30px;
        padding: 4px 10px 0;
        box-sizing: border-box;
    }
    .product-plugin__left,
    .product-plugin__right {
        flex: 0 0 45%;
        height: 400px;
        border: 1px solid #eaeef6;
        overflow: hidden;
    }
    .product-plugin__center {
        flex: 0 0 10%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .product-plugin__btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #507ff8;
        text-align: center;
        line-height: 32px;
        color: #fff;
        opacity: 0.12;
        &:first-child {
            opacity: 1;
            background-color: #507ff8;
            margin-bottom: 20px;
        }
    }
    .product-plugin__content {
        width: 100%;
        height: 260px;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
    }
    .product-plugin__item {
        width: 100%;
        height: 30px;
        padding: 0 10px;
        line-height: 30px;
        margin-top: 2px;
        &.checked {
            background-color: #507ff8;
            color: #fff;
        }
        &:hover {
            background-color: #507ff8;
            color: #fff;
        }
    }
}

.product-modify {
    padding: 0 40px;
    .product-modify__item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        &:first-child {
            margin-top: 0;
        }
    }
    .product-modify__label {
        flex: 0 0 60px;
        margin-right: 20px;
    }
    .product-detail__input {
        flex: 1 1 auto;
        height: 30px;
        line-height: 30px;

        &.only-show {
            border: 1px solid #dcdfe6;
            padding: 0 4px;
        }
    }

    .product-modify__service {
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
}
</style>